
<style lang="less">
  @media print {

    ._wz_TravelLogDetail {
      //@page {
      //  size: landscape;
      //}
      font-size: 4px;
      -webkit-print-color-adjust: exact;
      height: inherit !important;
      .ivu-radio-inner {
        border-color: #2d8cf0 !important;
      }

      .ivu-radio-wrapper-checked .ivu-radio-disabled .ivu-radio-inner:after {
        background-color: #2d8cf0 !important;
      }
    }
  }
</style>
<template>
  <div class="_wz_TravelLogDetail" ref="TravelLogDetail">
    <div class="no-print" style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;position: relative;">
      {{formData.deptName}}
      <Button type="primary" @click="printTest" style="position: absolute;right: 10px;top: 9px;">打印</Button>
    </div>
    <Form>
      <Card dis-hover style="margin-bottom: 10px;" class="_wz_TravelLogDetail1">
<!--        <p slot="title">-->
<!--          出车信息-->
<!--          <span class="no-print" style="color: #f00;font-size: 12px;font-weight: 600;margin: 0 0 0 10px;">打印时候，建议横向打印。</span>-->
<!--        </p>-->
<!--        <p slot="extra">-->
<!--          <Button type="primary" @click="printTest" class="no-print">打印</Button>-->
<!--        </p>-->
        <table cellpadding="0" cellspacing="0" border="0">
          <colgroup>
            <col width="12%">
            <col width="12%">
            <col width="18%">
            <col width="12%">
            <col width="18%">
            <col width="12%">
            <col width="16%">
          </colgroup>
          <tbody>
          <tr>
            <td style="text-align: center;">运单编号</td>
            <td colspan="2">{{formData.logRecordNumber}}</td>
            <td style="text-align: center;">运输企业</td>
            <td colspan="3">{{formData.deptName}}</td>
          </tr>
          <tr>
            <td rowspan="4" style="text-align: center;">运输任务</td>
            <td>运输车辆</td>
            <td>{{formData.vehiclePlateNo}}</td>
            <td>车架号</td>
            <td>{{formData.vehicleFrameNo}}</td>
            <td>天气情况</td>
            <td>{{formData.weather}}</td>
          </tr>
          <tr>
            <td>运输性质</td>
            <td>{{formData.goods}}</td>
            <td>从业人员</td>
            <td>{{formData.driverName}}</td>
            <td>联系电话</td>
            <td>{{formData.driverPhone}}</td>
          </tr>
          <tr>
            <td>发车时间</td>
            <td>{{formData.beginDate}}</td>
            <td>收车时间</td>
            <td>{{formData.endDate}}</td>
            <td>额定荷载</td>
            <td>{{formData.ratedLoad}}</td>
          </tr>
          <tr>
            <td>发车地点</td>
            <td>{{formData.beginLocation}}</td>
            <td>收车地点</td>
            <td>{{formData.endLocation}}</td>
            <td>实际荷载</td>
            <td>{{formData.actualLoad}}</td>
          </tr>
          <tr>
            <td>行车安全问询</td>
            <td colspan="6" style="line-height: 30px;padding: 10px;">
              <template v-for="item,index in beforeRemindContext">
                <Alert :type="item.remindResult == item.remindAnswer?'success':'error'">
                  {{ index+1}}. {{item.remindName}}
                  <span style="margin: 0 0 0 20px;">
                    <RadioGroup v-model.number="item.remindResult">
                      <Radio :label="1" disabled>正确</Radio>
                      <Radio :label="0" disabled>错误</Radio>
                    </RadioGroup>
                  </span>
                </Alert>
              </template>
            </td>
          </tr>
          <tr>
            <td rowspan="4" style="text-align: center;">出车前<br />检查</td>
            <td colspan="5" style="padding: 10px;line-height: 30px;">
              <template v-for="item,index in beforeCheckContext">
                <Checkbox :label="item.checkResult" :false-value="0" :true-value="1" v-model="item.checkResult" disabled>
                  {{item.checkValue}}
                </Checkbox>
                <br />
              </template>
            </td>
            <td rowspan="4">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.beforeCheckImg?apiUrl.imgUrl+formData.beforeCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.beforeSignImg?apiUrl.imgUrl+formData.beforeSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
          <tr>
            <td>出车结论</td>
            <td colspan="4" style="padding: 10px;">
              <RadioGroup v-model="formData.beforeConclusion" disabled>
                <Radio :label="0" disabled>不符合出车要求</Radio>
                <Radio :label="1" disabled>良好可以行驶</Radio>
              </RadioGroup>
            </td>
          </tr>
          <tr>
            <td>检查人</td>
            <td>{{formData.beforeCheckUser}}</td>
            <td>检查时间</td>
            <td colspan="2">
              {{formData.beforeCheckTime}}
            </td>
          </tr>
          <tr>
            <td>故障处理</td>
            <td colspan="4">{{formData.beforeTroubleshooting}}</td>
          </tr>
          <tr>
            <td rowspan="3" style="text-align: center;">行车中<br />检查</td>
            <td colspan="5" style="padding: 10px;line-height: 30px;">
              <template v-for="item,index in midwayCheckContext">
                  <Checkbox :label="item.checkResult" :false-value="0" :true-value="1" v-model="item.checkResult" disabled>
                    {{item.checkValue}}
                  </Checkbox>
                  <br />
              </template>
            </td>
            <td rowspan="3">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.midwayCheckImg?apiUrl.imgUrl+formData.midwayCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.midwaySignImg?apiUrl.imgUrl+formData.midwaySignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
          <tr>
            <td>检查人</td>
            <td colspan="1">{{formData.midwayCheckUser}}</td>
            <td>检查时间</td>
            <td colspan="2">
              {{formData.midwayCheckTime}}
            </td>
          </tr>
          <tr>
            <td>故障处理</td>
            <td colspan="4">{{formData.midwayTroubleshooting}}</td>
          </tr>
          <tr>
            <td rowspan="3" style="text-align: center;">收车后<br />检查</td>
            <td colspan="5" style="padding: 10px;line-height: 30px;">
              <template v-for="item,index in afterCheckContext">
                <Checkbox :label="item.checkResult" :false-value="0" :true-value="1" v-model="item.checkResult" disabled>
                  {{item.checkValue}}
                </Checkbox>
                <br />
              </template>
            </td>
            <td rowspan="3">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.afterCheckImg?apiUrl.imgUrl+formData.afterCheckImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%;">
                  <img :src="!!formData.afterSignImg?apiUrl.imgUrl+formData.afterSignImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
            </td>
          </tr>
          <tr>
            <td>检查人</td>
            <td>{{formData.afterCheckUser}}</td>
            <td>检查时间</td>
            <td colspan="2">{{formData.afterCheckTime}}</td>
          </tr>
          <tr>
            <td>故障处理</td>
            <td colspan="4">{{formData.afterTroubleshooting}}</td>
          </tr>
          <tr>
            <td :rowspan="shiftRecord.length + 1" style="text-align: center;">交接班<br />记录</td>
            <td>驾驶时长</td>
            <td>时间区间</td>
            <td>交接地点</td>
            <td colspan="2">交/接班人</td>
            <td>接班图片</td>
          </tr>
          <template v-for="item in shiftRecord">
            <tr>
              <td>{{parseInt(item.continuousTime / 60)}}小时{{item.continuousTime % 60}}分钟</td>
              <td>{{item.beginDrive}} 至 {{item.endDrive}}</td>
              <td>{{item.breakPoint}}</td>
              <td colspan="2">{{item.shifter}} <Icon type="md-arrow-forward" /> {{item.successor}}</td>
              <td>
                <div class="demo-upload-list">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!item.shiftImg?apiUrl.imgUrl+item.shiftImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
              </td>
            </tr>
          </template>
          <tr>
            <td style="text-align: center;">安全<br />负责人</td>
            <td colspan="6"></td>
          </tr>
          </tbody>
        </table>
      </Card>

    </Form>
  </div>
</template>
<script>
  export default {
    props: ['currentTravelLogId'],//接收来自父组件的数据
    data() {
      return {
        formData: {
          beforeTroubleshooting: '无',
          midwayTroubleshooting: '无',
          afterTroubleshooting: '无',
          beforeConclusion: 1,
          weather: "晴"
        },//出车日志基本信息


        beforeCheckContext:[],//行车前检查项记录
        midwayCheckContext:[],//行车中检查项记录
        afterCheckContext:[],//收车后检查项记录
        beforeRemindContext:[],//询问项

        shiftRecord: [],//交班记录

        notificationContent: [],//告知内容

      }
    },
    beforeCreate() {//beforeCreate创建前状态
    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.axios.post(that.apiUrl.webApi + '/safety/drivingLog/drivingLogInfo', {uuid: that.currentTravelLogId}).then(res => {
        if (!!res) {
          that.formData = res.data.data;//出车信息

          that.beforeCheckContext = !!res.data.data.beforeCheckContext?JSON.parse(res.data.data.beforeCheckContext):[];
          that.midwayCheckContext = !!res.data.data.midwayCheckContext?JSON.parse(res.data.data.midwayCheckContext):[];
          that.afterCheckContext = !!res.data.data.afterCheckContext?JSON.parse(res.data.data.afterCheckContext):[];

          that.beforeRemindContext = !!res.data.data.beforeRemindContext?JSON.parse(res.data.data.beforeRemindContext):[];

        }
      }).catch(err => {
        console.log("失败", err)
      })



      that.axios.post(that.apiUrl.webApi + '/safety/drivingLog/drivingLogShiftList', {uuid: that.currentTravelLogId}).then(res => {
        if (!!res) {
           that.shiftRecord = res.data.data;//交班记录
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    methods: {//执行的方法

      printTest() {
        this.$print(this.$refs.TravelLogDetail) // 使用
      }
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>

<style lang="less">
  ._wz_TravelLogDetail {
    height: 100%;
    overflow: auto;

    ._wz_TravelLogDetail1 {

      table {
        border-top: 1px solid #515a6e;
        border-left: 1px solid #515a6e;
        width: 100%;
        table-layout:fixed;

        td {
          min-width: 0;
          height: 40px;
          box-sizing: border-box;
          text-align: left;
          text-overflow: ellipsis;
          border-right: 1px solid #515a6e;
          border-bottom: 1px solid #515a6e;
          padding-left: 18px;
          padding-right: 18px;
          overflow:hidden;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }
      }

      ._wz_tableInput {
        ._wz_tableInput_span {
          width: 80px;
          display: inline-block;
          height: 33px;
          line-height: 33px;
        }

        .ivu-form-item {
          display: inline-block;
          width: calc(100% - 85px);
        }
      }

      .ivu-select-selection {
        border: 0px;
      }

      input {
        border: 0px;
        border-bottom: 1px solid #dcdee2;
        border-radius: 0px;
      }

      textarea.ivu-input {
        border: 0px;
        resize: none;
      }

    }


    .demo-upload-list {
      display: inline-block;
      width: 90%;
      //width: 140px;
      height: 80px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner {
      border-color: #2d8cf0 !important;
      background-color: #2d8cf0 !important;
    }

    .ivu-radio-disabled .ivu-radio-inner {
      border-color: #2d8cf0 !important;
    }

    .ivu-radio-disabled .ivu-radio-inner:after {
      background-color: #2d8cf0;
    }

    .ivu-checkbox-disabled.ivu-checkbox-checked .ivu-checkbox-inner:after {
      border-color: #fff;
    }
  }
</style>
